// 查看盈利情况
<template>
  <div class="oilInlet-container">
    <van-nav-bar
      class="app-nav-bar"
      title="盈利情况"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell title="选择日期区间" :value="date" @click="show = true" />
    <van-calendar :default-date='[new Date(new Date(new Date().toLocaleDateString()).getTime()), new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000)]' :min-date="minDate" :max-date="maxDate" v-model="show" type="range" @confirm="onConfirm" />
    <el-table show-summary :data="list" border>
      <el-table-column prop="oil_sale_date" label="加油日期">
      </el-table-column>
      <el-table-column prop="driver" label="司机" width="80px">
      </el-table-column>
      <el-table-column prop="oiling_quantity" label="加油量" width="80px"> </el-table-column>
      <el-table-column prop="profit" label="盈利"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import { addLeave, getLeave } from '@/api/leave'
import { getOilSaleInfo } from '@/api/oilSale'
export default {
  name: 'oilDetailedIndex',
  components: {},
  props: {},
  data () {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2035, 0, 31),
      date: '',
      show: false,
      start_time: null,
      end_time: null,
      list: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    formatDate (date) {
      return `${date.getYear() + 1900}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      // console.log(new Date(date[0]).getTime())
      // console.log(new Date(date[1]).getTime())
      this.start_time = new Date(date[0]).getTime()
      this.end_time = new Date(date[1]).getTime()

      this.list = []
      this.$toast.loading({
        message: '查询中...', // 提示文本
        forbidClick: true, // 禁止背景点击
        duration: 0 // 展示时长ms 值为0时 toast不会消失
      })
      getOilSaleInfo().then(res => {
        // console.log(val)
        console.log(res)
        for (let i = 0; i < res.data.data.length; i++) {
          if (res.data.data[i].time_stamp < this.end_time && res.data.data[i].time_stamp > this.start_time) {
            this.list.push(res.data.data[i])
          }
        }
        if (this.list.length !== 0) {
          this.$toast.success('查询成功')
        } else {
          this.$toast.fail('暂无数据')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.van-field {
  border-radius: 10px;
  // margin: 16px 0;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}
</style>
